Silverlight 형식의 웹서버는 인터넷 익스플로어 상에서 운용되므로 웹 페이지 내에 Silverlight 모듈에 대한 설정해야 한다.
html 형식의 웹 페이지 작성
html 웹 문서로 silverlight 방식의 웹 서버 설정을 위해서는 <표 1>과 같은 요소를 추가해야 한다.
추가할 주요내용 |
<body> <div id='errorLocation' style="font-size: small;color: Gray;"></div> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="http://192.168.1.5/../ClientBin/SilverlightGraphicModule.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="2.0.31005.0" /> <param name="autoUpgrade" value="true" /> <param name="Initparams" value="filename=Main.modx" /> <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> </a> </object> <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe> </div> </body> |
| <표 1> html 웹 문서로 silverlight 방식의 웹 서버 설정을 위해 추가할 내용의 예 |
<표 1>의 <param name="Initparam" value="filename=startup.modx" /> 영역을 수정하여 초기에 표시할 그래픽 감시화면(modx)을 설정할 수 있으며 "width="100%" height="100%" 영역에서 가로, 세로 확대/축소 비율을 설정할 수 있다.
만약 웹 화면의 특정한 위치에 감시화면을 표시할 경우에는 <표 1>의 세 번째 줄의 내용을 <div id="silverlightControlHost" style="width: 150px; height: 150px; left: 100px; top: 100px; position:absolute;">과 같은 형식으로 변경하여 사용하면 된다.
여기서 "width: 150px; height: 150px; left: 100px; top: 100px 는 가로 크기, 세로 크기, 왼쪽 시작위치, 위쪽 시작위치이다.
<표 2>는 html 웹 문서로 silverlight 방식의 웹 서버를 사용할 때 주요 설정 내용이다.
| 설정내용 | 수정할 부분 |
| 확대/축소 | width="100%"
height="100%" 영역에서 가로/세로 비율을 설정 |
| 위치 | <div id="silverlightControlHost"
style="width: 150px; height: 150px; left: 100px; top: 100px;
position:absolute;"> 와 같은 부분을 추가하여 가로/세로 크기, 왼쪽/위쪽 시작위치를 설정 |
| Xap 파일위치 | http://192.168.1.5/ClientBin/SilverlightGraphicModule.xap"/ 영역에 실제 xap 파일이 있는 패스를 입력 |
<표 2> html 웹 문서로 silverlight 방식의 웹 서버를 사용할 때 주요 설정 내용
<그림 1>은 html 웹 문서로 전체화면 silverlight 방식의 웹 서버 설정 예이고 <그림 2>는 부분화면의 웹 서버 설정 예이다.
<그림 1> html 웹 문서로 전체화면 silverlight 웹 서버 설정의 예
<그림 2> html 웹 문서로 부분화면 silverlight 웹 서버 설정의 예
참조) 프로그램 설치 폴더 하부의 WebServer\AutoWeb\Silverlight 폴더에 Silverlight 예제 html 파일 참조
aspx 형식의 웹 페이지 작성
aspx 웹 문서로 silverlight 방식의 웹 서버 설정을 위해서는 <표 3>과 같은 요소를 추가해야 한다.
추가할 주요내용 |
<%@ Page Language="c#" AutoEventWireup="true" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;"> <head runat="server"> <title>Test Page For SilverlightGraphicModule</title> </head> <body style="height:100%;margin:0;"> <form id="form1" runat="server" style="height:100%;"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div style="height:100%;"> <asp:Silverlight ID="Silverlight1" runat="server" Source="http://192.168.1.5/ClientBin/SilverlightGraphicModule.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" InitParameters="filename=iocard.modx" Windowless="true" PluginBackground="Transparent" /> </div> </form> </body> </html> |
| <표 3> aspx 웹 문서로 silverlight 방식의 웹 서버 설정을 위해 추가할 내용의 예 |
<표 3>의 InitParameters="filename=iocard.modx" 영역을 수정하여 초기에 표시할 그래픽 감시화면(modx)을 설정할 수 있으며 " width="100%" height="100%" 영역에서 가로, 세로 확대/축소 비율을 설정할 수 있다.
만약 웹 화면의 특정한 위치에 감시화면을 표시할 경우에는 <표 3>의 <div style="height:100%;"> 부분을 <div style="width:400px; height:300px; left:650px; top:350px; position:absolute;"> 와 같은 형식으로 변경하여 사용하면 된다.
여기서 "width:400px; height:300px; left:650px; top:350px 는 가로 크기, 세로 크기, 왼쪽 시작위치, 위쪽 시작위치이다.
<표 4>는 aspx 웹 문서로 silverlight 방식의 웹 서버를 사용할 때 주요 설정 내용이다.
| 설정내용 | 수정할 부분 |
| 확대/축소 | width="100%"
height="100%" 영역에서 가로/세로 비율을 설정 |
| 위치 | <div style="width:400px; height:300px;
left:650px; top:350px; position:absolute;"> 와 같은 부분을 추가하여 가로/세로 크기, 왼쪽/위쪽 시작위치를 설정 |
| Xap 파일위치 | ../ClientBin/SilverlightGraphicModule.xap"/ .. 영역에 http://192.168.1.5 와 같이 실제 xap 파일이 있는 패스를 입력 |
| <표 4> aspx 웹 문서로 silverlight 방식의 웹 서버를 사용할 때 주요 설정 내용 | |
<그림 3>은 aspx 웹 문서로 전체화면 silverlight 방식의 웹 서버 설정의 예이고 <그림 4>는 2개의 부분화면 웹 서버 설정 예이다.
<그림 3> aspx 웹 문서로 전체화면 silverlight 방식의 웹 서버 설정 예
<그림 4> aspx 웹 문서로 2개의 부분화면 silverlight 방식의 웹 서버 설정 예
참조) 프로그램 설치 폴더 하부의 WebServer\AutoWeb\Silverlight 폴더에 Silverlight 예제 aspx 파일 참조
관련항목)